<%--
  Created by IntelliJ IDEA.
  User: Mucd
  Date: 2021/6/23
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Register</title>
    <style>
        .layui-container {
            width: 650px !important;
        }
        .h1txt{
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="<c:url value="/static/layui/css/layui.css"/>">
    <script src="<c:url value="/static/layui/layui.js"/>"></script>
</head>
<body>
<br/>
<br/>
<br/>
<div class="layui-container">

    <div class="layui-row">
        <form class="layui-form" action="Register" method="post">
            <h1 class="h1txt"><%= "Hello Register!" %>
            </h1>
            <br>
            <br>
            <br>
            <div class="layui-form-item">
                <label class="layui-form-label">注册账号</label>
                <div class="layui-input-block">
                    <input type="text" name="rname" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">注册密码</label>
                <div class="layui-input-block">
                    <input type="password" name="rpasswd" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required" name="code" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                    <br>
                    <c:if test="${sessionScope.text != null}">
                        <p style="color: red">验证码错误!!!重新输入</p>
                        <br>
                    </c:if>
                    <br>
                    <a href="javascript:" onclick="changeCode()"><img src="VCode" alt="验证码"></a>
                    <br>
                    <p>看不清?点击验证码刷新!</p>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">注册</button>
                    <a href="index.jsp" class="layui-btn layui-btn-danger">有账号?去登录</a>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>

    </div>

</div>

<%--表单验证--%>
<script>
    let layer = layui.use('form',function(){
        //初始化
        let form = layui.form;
        form.verify({
            //value：表单的值、item：表单的DOM对象
            username:function(value,item){
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
            },
            pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        })
    })
    let a = ${requestScope.cg};

    if (a === true){
        let b1 = confirm("注册完成,去登录");
        if (b1){
            window.location.href = "index.jsp";
        }
    }
</script>

<%--刷新验证码--%>
<script>

    function changeCode() {
        let time = new Date().getTime();
        let getImg = document.getElementById("code");
        getImg.onclick = function () {
            getImg.src = "VCode?time=" + time;
        }
    }
</script>
</body>
</html>
